<!DOCTYPE html>
<html lang="en" style="overflow: hidden;height:100%;">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<!--<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../../public/res/css/g.css" media="all">
		<link rel="stylesheet" href="../../public/res/css/pGis.css" media="all">
		<link rel="stylesheet" href="../../public/plugins/swiper/swiper-3.2.7.min.css" />
		<script type="text/javascript" src="../../layuiadmin/layui/layui.js" ></script>
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script type="text/javascript" src="../../public/plugins/swiper/swiper-3.4.0.jquery.min.js" ></script>-->
	</head>
	<body class="bd-content">
		<div class="layui-row full-height">
			<div class="layui-col-xs4 layui-col-sm4 full-height">
				<div class="tree_box">
					<div class="layui-row">
						<div class="layui-col-xs12">
							<input class="layui-input" name="id" id="test-table-demoReload" placeholder="搜索内容..." autocomplete="off" size="30">
						</div>
					</div>
					<div class="swiper-container swiper1">
						<div class="swiper-wrapper">
						<div class="swiper-slide selected">推荐</div>
						<div class="swiper-slide">菜单 2</div>
						<div class="swiper-slide">菜单 3</div>
						<div class="swiper-slide">菜单 4</div>
						<div class="swiper-slide">菜单 5</div>
						<div class="swiper-slide">菜单 6</div>
						<div class="swiper-slide">菜单 7</div>
						<div class="swiper-slide">菜单 8</div>
						<div class="swiper-slide">菜单 9</div>
						<div class="swiper-slide">菜单 10</div>
						</div>
					</div>
					<div class="swiper-container swiper2 lf-flow">
						<div class="swiper-wrapper">
							<div class="swiper-slide swiper-no-swiping">
								<div style="width: 100%;height: 100%;">上面导航栏可以滑动</div>
							</div>
							<div class="swiper-slide swiper-no-swiping">上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222 上面导航栏可以滑动2222
							</div>
							<div class="swiper-slide swiper-no-swiping">内容 213213123</div>
							<div class="swiper-slide swiper-no-swiping">内容 ressssssss</div>
							<div class="swiper-slide swiper-no-swiping">内容 ffffffffffff</div>
							<div class="swiper-slide swiper-no-swiping">内容 bbbbbbbbbbbbbbbbbvb</div>
							<div class="swiper-slide swiper-no-swiping">内容 bvcccccccccccbvb</div>
							<div class="swiper-slide swiper-no-swiping">内容 sdasdssssss</div>
							<div class="swiper-slide swiper-no-swiping">内容 oiouiouioiuoiuo</div>
							<div class="swiper-slide swiper-no-swiping">内容 m,jnkjhkhgjghjugh</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-xs8 layui-col-sm8 rt-box">
				<div class="oncase_box rt-flow">
					<ul>
						<li>
						<span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
						<a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
						<a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
						<a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
						</li>
						<li>
						<span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
						<a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
						<a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
						<a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
						</li>
						<li>
						<span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
						<a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
						<a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
						<a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
						</li>
						<li>
						<span class="layui-badge layui-badge-rim">警务网格＞平桂区＞羊头镇</span>
						<a class="layui-badge layui-bg-cyan" href="####" title="设置"><i class="zkuasgm-icon">&#xe615;</i></a>
						<a class="layui-badge layui-bg-blue" href="####" title="颜色"><i class="zkuasgm-icon">&#xe608;</i></a>
						<a class="layui-badge" href="####"><i class="zkuasgm-icon" title="删除">&#xe66d;</i></a>
						</li>
					</ul>
				</div>
			</div>
		</div>	
		<script>
			layui.use('element', function(){
			  var $ = layui.jquery
			  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
			});
		</script>
			<script>
				$(function() {
					function setCurrentSlide(ele, index) {
						$(".swiper1 .swiper-slide").removeClass("selected");
						ele.addClass("selected");
						//swiper1.initialSlide=index;
					}
	
					var swiper1 = new Swiper('.swiper1', {
	//					设置slider容器能够同时显示的slides数量(carousel模式)。
	//					可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
	//					loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
						slidesPerView: 3.5,
						paginationClickable: true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
						spaceBetween: 10,//slide之间的距离（单位px）。
						freeMode: true,//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
						loop: false,//是否可循环
						onTab: function(swiper) {
							var n = swiper1.clickedIndex;
						}
					});
					swiper1.slides.each(function(index, val) {
						var ele = $(this);
						ele.on("click", function() {
							setCurrentSlide(ele, index);
							swiper2.slideTo(index, 500, false);
							//mySwiper.initialSlide=index;
						});
					});
	
					var swiper2 = new Swiper('.swiper2', {
						//freeModeSticky  设置为true 滑动会自动贴合  
						direction: 'horizontal',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
						loop: false,
	//					effect : 'fade',//淡入
						//effect : 'cube',//方块
						//effect : 'coverflow',//3D流
	//					effect : 'flip',//3D翻转
						autoHeight: true,//自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
						onSlideChangeEnd: function(swiper) {  //回调函数，swiper从一个slide过渡到另一个slide结束时执行。
							var n = swiper.activeIndex;
							setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
							swiper1.slideTo(n, 500, false);
						}
					});
				});
			</script>
	</body>

</html>